A Pop-Up AR Cube Experience
Introduction
A promotional AR cardboard cube that I developed to send to prospective employers in the post. The cube which is under-tension as it has an elastic band inside, springs into its 3D form when the letter is opened so acting as a ‘call-to-action’. Its WebAR content which can be personalised to the individual or company, is accessed via either the Chrome browser on Android or Safari on iOS devices so avoiding the need for downloading an app.
Each side of the cube provides an interactive AR vignette illustrating a particular quality that I can bring to their organisation as well as illustrating different types of interaction and showcasing my technical skills in terms of design, coding and 3d modelling etc.
THE SIDES
TEAMWORKING
As a metaphor for teamworking, by clicking on the arrows the user is able to move each of the characters on the side stages to operate the robots and lift the platforms up to enable the top character to reach the top platform and ring the bell so achieving the collective goal.
IDEATION
This side allows users to the control the claw of an 'Idea Grabber' using the buttons to try and pick up one of 32 different ideas represented by a lightbulb, which once grabbed will turn on and the corresponding idea will then appear on the LED panel on the grabber.
INNOVATION
This side uses a rocket to represent innovation. The user is able to move the avatar into the rocket by clicking on the arrows and launching them into space using the buttons on the control panel.
PROBLEM-SOLVING
This side allows the user to tilt the physical cube to roll the marbles around the maze, load them into the cannon and try and hit the targets.
MULTIFACETED
This side uses the analogy of the cube and its multiple sides to describe the multiple skills I have with different characters representing me engaged in different activities. It is inspired by the M.C. Escher print, “Relativity.” and Spike Jonze's film "Being John Malkovich".
INTERVIEW
This side allows users to interview a virtual me and ask standard interview questions including strength and competency based questions.
TECHNICAL OVERVIEW
The website utilises the libraries Three.js for rendering, Ammo.js for its physics engine, a version of the open source AR.js library for its AR tracking which I optimised for my own purposes and both Microsoft's and Google's cloud platforms for the conversational content. The Generic Sensor API is used to get the physical rotation of the cube by removing the rotation of the mobile device’s inbuilt gyroscope so the AR content can be delivered in the correct orientation as well as allowing the cube to be used as the controller (see the Problem-Solving side).
I developed a bespoke CMS for this website where everything including the content, game states and events are controlled within the CMS with the idea that the same physical cube could be sent out to multiple individuals but the digital content could be personalised to companies and individuals by pointing to a different content file as a parameter in the URL delivered via a QR code.
To optimise loading times, I wrote a bespoke asset loader to allow for content to only be loaded once if used multiple times on different sides so reducing the overall loading time of the whole experience. For example the five 3d characters used on the teamwork side, the ten avatars used in the multifaceted side and one on the innovation side all use the same 3d mesh loaded only once but with different texture maps.
